<template>
  <div>
    <div class="header-fixed">
      <Header :text="text">
      <!-- 筛选条件 -->
      <section style="width: 100%;background-color: #a1c4f9">
<!--        <el-button type="danger" size="mini" plain @click="handleDelivery">提货</el-button>-->
        <el-popover
            placement="bottom"
            width="160"
            v-model="visible">
          <!-- <div class="bottom-text" @click="handleScanner"><van-icon name="scan"/>{{$t('cExport.handDelivery')}}</div> -->
          <div class="bottom-text" @click="handleHand"><van-icon name="edit"/>{{$t('cExport.handDelivery')}}</div>
          <el-button size="medium" type="danger" slot="reference">{{$t('cExport.delivery')}}</el-button>
        </el-popover>
      </section>
      <!--
      <div class="bottom" style="width: 25%;border:1px solid #aaaaaa; background-color: #fff;" v-if="isShow">

        <div class="bottom-text" @click="handleScanner"><van-icon name="scan" style="padding-right: 5px"/>扫码提货</div>

        <div class="bottom-text" @click="handleHand"><van-icon name="edit" style="padding-right: 5px"/>手动提货</div>
      </div>
      -->
      </Header>
    </div>
    <Scroll
        class="scroll-content"
        ref="scroll"
        :is-flag="true"
        @pulling="loadMore"
    >
      <TransportDetail
          v-for="(item,index) in list"
          :key="index"
          :transObj="item"
          :wareHouse="true"
          :class="item.aog === 'AOG' ? 'backColor':''"
          @click.native="handleDetail(item)"
      >
      </TransportDetail>
    </Scroll>
    <Footer :text="$t('btn.allTihuo')" @handleOk="handleOk"/>
    <!-- 手动输入 -->
    <van-dialog v-if="show" v-model="show" :title="`${$t('m.please')+$t('cExport.packing')}`" :beforeClose="handleConfirm" show-cancel-button>
      <el-input :placeholder="`${$t('m.please')+$t('cExport.packing')}`" style="padding:10px" v-model="shipmentInput"/>
    </van-dialog>
    <!-- 请选择 -->
    <el-dialog
      :title="$t('m.choose')"
      :visible="true"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      v-if="!isChoose"
      class="choose"
      width="90%">
      <div style="display: flex;">
        <el-button @click="isChoose = false" style="flex:1">{{$t('cExport.endShao')}}</el-button>
        <el-button type="primary" @click="handleNext" style="flex:1">{{$t('cExport.next')}}</el-button>
      </div>
    </el-dialog>
    <!-- 弹框详情 -->
    <ShipmentDetail v-if="isDialog"
                    :wareObj="wareObj"
                    :thing="thing"
                    @handleClose="handleClose"
                    @handleAddList="handleAddList"
                    @handleDelete="handleDelete"
    />
  </div>
</template>

<script>
import Header from '../../components/common/Header'
import TransportDetail from '../../components/common/export/TransportDetail'
import Footer from '../../components/common/Footer'
import ShipmentDetail from './components/ShipmentDetail'
import Scroll from "@/components/common/scroll/Scroll"
import { Notify } from 'vant'
import {$export} from "@/api/export";

export default {
  components: {
    Header,
    TransportDetail,
    Footer,
    [Notify.Component.name]: Notify.Component,
    ShipmentDetail,
    Scroll
  },
  data() {
    return {
      text: '',
      loading: false,
      finished: false,
      list: [],
      isShow: false,
      show: false,
      isDialog: false,
      listDetail: false,
      isChoose: true,
      shipmentInput: '', // 装箱单号
      wareObj: {}, // 被点击详情
      formLabelAlign: {
        page: 1,
        limit: 10,
        status: null,
      },
      thing: 0,
      visible: false
    }
  },
  created() {
    this.text = this.$t(this.$route.query.type)
  },
  activated() {
    this.text = this.$t(this.$route.query.type)
    this.$refs.scroll.refresh()
    this.getList()
  },
  methods: {
    // 加载数据
    getList() {
      // if (this.list.length >= this.totalCount) return console.log('我也是有底线的')
      this.formLabelAlign.page = this.formLabelAlign.page + 1
      $export.getByStatus(this.formLabelAlign)
          .then(res => {
            if (res.status === 200) {
              this.list.push(...res.data.list)
            }
            else {
              this.$msg.fail(res.message || res.msg || this.$t('message.noTry'))
            }
          })
          .catch(err => {
            this.$msg.fail(err.message || err.msg || this.$t('message.noTry'))
          })
          .finally(() => {
            this.$refs.scroll.finishPullUp()
          })
    },
    // 加载更过
    loadMore() {
      // this.getList()
      this.$refs.scroll.scroll.refresh()
    },
    handleDetail(item) {
      this.wareObj = item
      this.thing = 0
      this.isDialog = !this.isDialog
    },
    // 提货
    handleDelivery() {
      this.isShow = !this.isShow
    },
    // 手动输入
    handleHand() {
      this.visible = false
      this.show = true
    },
    // 点击确认装箱单号
    handleConfirm(action,done) {
      if (action === 'confirm') {
        if (this.shipmentInput === '') {
          done()
          this.show = false
          this.shipmentInput = ''
          return Notify(this.$t('message.noPacking'))
        }
        else {
          this.getDetail(this.shipmentInput,done)
        }
      } else {
        done()
      }
    },
    // 加入提货列表
    handleAddList(obj) {
      let flag = false
      this.list.forEach(item => {
        if (item.shipmentNumber === obj.shipmentNumber) flag = true
      })
      if (flag) {
        this.isDialog = false
        return this.$msg.fail(this.$t('message.alreadyAdd'))
      }
      this.list.push(obj)
      this.isDialog = false // 关闭弹框
      this.loadMore()
    },
    // 撤销提货
    handleDelete(number) {
      this.list = this.list.filter(item => {
        if (item.shipmentNumber !== number) return item
      })
      this.loadMore()
    },
    // 批量提货
    handleOk() {
      if (this.list.length === 0) return this.$msg.fail(this.$t('message.listNo'))
      const arr = []
      this.list.forEach(item => {
        arr.push(item.shipmentNumber)
      })
      $export.getGoods(arr)
             .then(res => {
               this.$msg.hideLoading()
               if (res.status === 200) {
                 this.$msg.success(res.message)
                 this.list = []
               }
               else {
                 this.$msg.fail(res.msg || res.message || this.$t('message.noTry'))
               }
             })
             .catch(err => this.$msg.fail(err.msg || err.message || this.$t('message.noTry')))
    },
    // 下一单
    handleNext() {},
    // 关闭弹框
    handleClose(number) {
      this.isDialog = !this.isDialog
      if (number) {
        this.list.forEach((item,index) => {
          if (item.shipmentNumber == number) this.list.splice(1,index)
        })
      }
    },
    // 扫码
    handleScanner() {
      this.visible = false
      var FNScanner = api.require('FNScanner')
      FNScanner.openScanner({
        autoration: true
      },(ret, err) => {
        // 扫描成功
        if (ret.eventType == 'success') {
          const obj = JSON.parse(ret.content)
          if (obj && obj.shipmentNumber) {
            this.getDetail(obj.shipmentNumber)
          }
          else {
            return this.$msg.fail(this.$t('message.noScan'))
          }
        }
        else {
          console.log(err)
        }
      })
    },
    // 获取装箱号详情
    getDetail(shipmentNumber,done) {
      $export.getWareHouseDetils({ shipmentNumber })
             .then(res => {
               if (res.status === 200) {
                 this.wareObj = res.data
                 this.thing = 1
                 this.isDialog = true
               }
               else {
                 this.$msg.fail(res.msg || res.message || this.$t('message.alreadyPacking'))
               }
             })
             .catch(err => {
               this.$msg.fail(err.msg || err.message || this.$t('message.noTry'))
             })
             .finally(() => {
               done ? done() : ''
               this.shipmentInput = ''
             })
    }
  }
}
</script>

<style scoped>
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}
.bottom {
  position: absolute;
  right: 0;
}
.bottom-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  padding: 1.389vw 0;
}
.bottom-text:nth-child(1) {
  border-bottom: 1px solid #aaaaaa;
}
section {
  display: flex;
  justify-content: flex-end;
  background-color: white;
}
.text-content {
  position: relative;
  top: 29.333vw;
}
/deep/.van-list {
  height: calc(92vh);
  overflow-y: scroll;
}
.choose /deep/.el-dialog {
  margin-top: 38vh!important;
}
/deep/.el-dialog__close {
  display: none !important;
}
/* 货物列表 */
.one {
  display: flex;
  font-size: 15px;
}
.one div {
  flex: 1;
}
.one-text {
  font-weight: bold;
}
.one div span:nth-child(2) {
  text-indent: 7px;
}
.one div:last-child {
  display: flex;
}
.two {
  display: flex;
}
.two span:nth-child(1) {
  width: 22.833vw;
}
.two span:nth-child(2) {
  flex: 1;
}
.backColor {
  background-color: rgba(255,165,0,.4) ;
}
/* better-scroll */
.scroll-content {
  position: absolute;
  top: 114px;
  left: 0;
  right: 0;
  height: calc(100vh - 122px - 53px);
  overflow: hidden;
}
</style>
